<template>
  <div class="combo-dialog">
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" width="650px">
      <div class="title" slot="title">选择套餐</div>
      <div class="combo-body">
        <div class="body-left">
          <div class="select-title">
            <div class="project-title" :class="{'active-project-title':selected}" @click="changeSelectMenu(true)">选择套餐
            </div>
            <div class="project-title" :class="{'active-project-title':!selected}" @click="changeSelectMenu(false)">
              已购买的套餐
            </div>
          </div>
          <div class="select-search">
            <el-input placeholder="请输入套餐名称" suffix-icon="el-icon-search" v-model="searchCombo"/>
          </div>
          <div class="items-body">
            <div v-for="item in selectCombos" :key="item.id" class="items" @click="selectItem(item.id)">
              <div :class="{'item-selected':item.selected}">{{ item.name }}</div>
              <div v-if="item.selected" class="item-selected"><i class="el-icon-check"></i></div>
            </div>
          </div>
        </div>
        <div class="body-right">
          <div class="right-title">{{selectedCombo.name}}</div>
          <div class="right-body">
            <el-checkbox-group v-model="checkItemList">
              <div v-for="(item,index) in selectedCombo.projects" :key="index" class="select-item">
                <el-checkbox :label="item.id">
                  <span>{{ item.name }}</span>
                  <span style="margin-left: 10px;color: #aba6a6">{{ item.count }}次</span>
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSelect">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { validatenull } from '@/utils/validate'

export default {
  name: 'selectCombo',
  data () {
    return {
      dialogVisible: false,
      searchCombo: '',
      selected: true,
      selectCombos: [],
      checkItemList: [],
      selectedCombo: {}
    }
  },
  methods: {
    getAllCombos () {
      this.selectCombos = [
        {
          id: 5,
          name: '全身经络疏通套餐',
          selected: true,
          type: '检查检测',
          price: 300,
          amount: 300,
          projects: [
            { id: 1, name: '中医体质检测', type: '处方', price: 200, amount: 200, num: 8 },
            { id: 2, name: '穴位艾灸理疗', type: '检查检测', price: 200, amount: 200, num: 6 },
            { id: 3, name: '拔罐', type: '检查检测', price: 200, amount: 200, num: 2 },
            { id: 4, name: '解压穴位按摩', type: '处方', price: 200, amount: 200, num: 3 }
          ]
        },
        {
          id: 6,
          name: '颈肩精准调理套餐',
          type: '检查检测',
          price: 500,
          amount: 500,
          projects: [
            { id: 1, name: '中医体质检测', num: 2 },
            { id: 2, name: '穴位艾灸理疗', num: 6 },
            { id: 4, name: '解压穴位按摩', num: 8 }
          ]
        },
        { id: 7, name: '腰部靶向干预套餐', type: '处方', price: 200, amount: 200, num: 12 },
        { id: 8, name: '脏腑气机调衡套餐', type: '检查检测', price: 200, amount: 200, num: 11 },
        { id: 9, name: '失眠调理套餐', type: '检查检测', price: 200, amount: 200, num: 14 },
        { id: 10, name: '三高舒解套餐', type: '处方', price: 200, amount: 200, num: 15 },
        { id: 11, name: '正骨塑形套餐', type: '检查检测', price: 200, amount: 200, num: 7 }
      ]
      this.selectedCombo = this.selectCombos[0]
      this.selectCombos.map(item => {
        delete item.isPaid
        return item
      })
      this.checkItemList = []
    },
    changeSelectMenu (flag) {
      this.getAllCombos()
      this.selected = flag
      if (!flag) {
        this.selectCombos = this.selectCombos.slice(0, 2)
        this.selectCombos.map(item => {
          item.isPaid = true
          return item
        })
      }
      this.selectedCombo = this.selectCombos[0]
      this.checkItemList = []
    },
    selectItem (id) {
      this.checkItemList = []
      this.selectCombos.map(item => {
        item.selected = false
        return item
      })
      const item = this.selectCombos.find(item => item.id === id)
      item.selected = true
      this.selectedCombo = item
    },
    confirmSelect () {
      if (validatenull(this.checkItemList) && !validatenull(this.selectedCombo.projects)) {
        Message.warning('请选择项目！')
        return
      }
      console.log(this.checkItemList)
      console.log(this.selectedCombo)
      if (!validatenull(this.selectedCombo.projects)) {
        this.selectedCombo.projects = this.selectedCombo.projects.filter(pro => {
          return this.checkItemList.indexOf(pro.id) > -1
        })
      }
      this.$emit('selectComboProject', [this.selectedCombo])
      this.dialogVisible = false
    },
    show () {
      this.dialogVisible = true
      this.getAllCombos()
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/variables";
.combo-dialog {
  .title {
    border-bottom: 1px solid #e5e1e1;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
  }
  .combo-body {
    display: flex;
    .body-left {
      width: 45%;
      background: #F6F8FA;
      padding: 20px;
      .select-title {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .project-title {
          color: rgba(0, 0, 0, 0.45);
          cursor: pointer;
        }
        .active-project-title {
          color: $mainBg;
          border-bottom: 2px solid $mainBg;
        }
      }
      .select-search {
        margin-top: 15px;
        margin-bottom: 10px;
      }
      .items-body{
        .items {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 0;
          border-bottom: 1px solid #eee7e7;
          cursor: pointer;
          .item-selected {
            color: $mainBg;
            font-weight: bold;
          }
        }
      }
    }
    .body-right {
      margin-left: 20px;
      padding: 0 0 20px 0;
      width: 50%;
      background: #F6F8FA;
      .right-title {
        padding: 15px 0 15px 30px;
        background: #E8F5FF;
        color: #185C8F;
      }
      .select-item {
        padding: 20px 0 0 30px;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
